<template>
    <div class="instagramBox">

        <div class="work-intro">
            <div class="title">
                <h2 class="title-text"><span>INSTAGRAM</span></h2>
            </div>
        </div>

        <div class="allInstagramBox">
            <div class="smallInstagramBox" v-for="item in 10">
                <div class="imageBox">
                    <img src="../../assets/image/women.png" alt="">
                    <div class="zhezhao">

                    </div>
                </div>
                <p>
                    Getting ahead starts with taking the first step. Hello, September - let`s do this!
                </p>

                <p>
                    <el-icon><ChatDotSquare /></el-icon>
                    12
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.instagramBox {
    width: 100%;
    max-width: 1240px;
    margin: 70px auto;
    box-sizing: border-box;
    padding: 20px;

    .title-text span {
        display: block;
        /*设置为块级元素会独占一行形成上下居中的效果*/
        position: relative;
        /*定位横线（当横线的父元素）*/
        font-family: 'PT Serif';
        font-weight: 400;
        color: #2d2e33;
        text-transform: none;
        font-size: 36px;
        text-align: center;
    }

    .title-text span:before,
    .title-text span:after {
        content: '';
        position: absolute;
        /*定位背景横线的位置*/
        top: 50%;
        background: #e5e5e7;
        /*背景横线颜色*/
        width: 35%;
        /*单侧横线的长度*/
        height: 1px;
    }

    .title-text span:before {
        left: 2%;
    }

    .title-text span:after {
        right: 2%;
    }

    .allInstagramBox {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 20px;

        .smallInstagramBox {
            margin-bottom: 20px;
            overflow: hidden;

            .imageBox{
                position: relative;

                &:hover{
                    .zhezhao{
                        opacity: 1;
                    }
                }

                .zhezhao{
                    position: absolute;
                    top:0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.85);
                    opacity: 0;
                }
            }

            img {
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;

                
            }
        }
    }
}
</style>